<template>
  <view class="big">
    <view class="title border-b">{{customerName}}交款</view>
    <!-- <view class="j-content-between flex border-b">
        <view style="font-size: 26rpx;">交款银行</view>
        <view>请选择</view>
    </view> -->
    <uni-collapse>
        <uni-collapse-item  title="交款银行">
            <scroll-view :style="{height: 170 + 'px'}" scroll-y="true"  @scrolltolower="queryData">
			<uni-list v-for="(item,index) in BankList" :key="item.id">
			    <uni-list-item clickable :title="item.name" @click="onClick(item,index)"  :class="index===isactive?'zzz':''" >
                </uni-list-item>
			</uni-list>
            <end-temp v-show="end"></end-temp>
        </scroll-view>
		</uni-collapse-item>
    </uni-collapse>
    <view class="j-content-between flex grey border-b ipt-p">
        <text  style="font-size: 24rpx;">金额</text>
        <input type="digit" placeholder="请输入"  style="flex-grow: 1;" v-model="taxAmount">
    </view>
    <view class="blue"  @click="preserve">保存</view>
  </view>
</template>

<script>
import { getScreen} from "../../service/auth";
import endTemp from "../../components/endTemp";
import {getBasBankList} from '@/service/api/logistics'
export default {
    name: "index",
    components:{endTemp},
    props:{
            // customerId:{
            //     Type:Number,
            //     default:0
            // },
            customerName:{
                Type:String,
                default:''
            },
        },
data() {
    return {
        page:1,
        size:20,
        end:false,
        isactive:null,
        BankList:[],
        bank:null,
        taxAmount:''
    }
},
created(){
    this.getbank()
},
methods: {
    queryData(){
      if(this.end)return
      this.page++
      this.getbank()
    },
    getbank(){
        const date={
            page:this.page,
            size:this.size
        }
        getBasBankList(date).then((res)=>{}).catch((err)=>{
            if (err.content.length<this.size) 
            this.end=true
            this.BankList=this.BankList.concat(err.content)
        })
    },
    onClick(e,i) {
         this.bank=e;
         this.isactive=i
        console.log(this.bank,'lllllllllllkkkkkkk',i,this.isactive);
},
            preserve(){
                if(this.taxAmount) {
                    console.log('保存',this.taxAmount,this.bank);
                    if (this.bank) {
                        const preserve={
                    taxAmount:this.taxAmount,
                    bankId:this.bank.id,
                    // bankName:this.bank.name,
                    // bankAccount:this.bank.name
                }
                
                this.$emit('bank',preserve,this.bank)
                this.taxAmount='',
                this.isactive=null,
                this.bank=null
                    }else{
                        uni.showToast({
					title: '请选择交款银行'
				});
                    }
                }else{
                    uni.showToast({
					title: '请输入金额'
				});
                }
                
        },
}
}
</script>

<style lang="scss" scoped>
.big{
    padding: 10rpx;
    background-color: #fff;
    .blue{
        color: #22AEFF;
        padding: 30rpx;
        text-align: right;
    }
    .title{
        padding: 30rpx;
    }
    
    .border-b{
        border-bottom: 1rpx solid #f1f1f1;
    }
    .grey{
        color:grey;
        padding:30rpx;
        
    }
    .ipt-p{
        input{
            text-align: right;
        }
    }
    
}
</style>